<template>
  <el-row :gutter="15">
    <el-col :span="16">
      <elCard>
        <div slot="header">
          <span>黑广播种类</span>
          <el-button
              type="primary"
              size="mini"
              style="float:right;"
              @click="flushChartData"
          >刷新数据
          </el-button>
        </div>
        <el-row style="height: 55vh">
          <yearCount
              :title="''"
              chartName="种类统计"
              :current-data="categoryValue"
              :loading="loading"
          />
        </el-row>
      </elCard>
    </el-col>
    <el-col :span="8">
      <elCard>
        <span slot="header">时间选择</span>
        <timeSelect
            @submitForm="submitForm"
            @resetForm="resetForm"
        />
      </elCard>
    </el-col>
  </el-row>
</template>

<script>
// ------------- axios -----------------
import {flushChartData, selectCategory} from "../../../../api/bigData";
// ------------- element-ui -------------------
import elCard from "../../../../components/element-ui/elCard";
import yearCount from "./echarts/yearCount";
// -------------- 自定义组件 -------------------
import timeSelect from "./timeSelect";

export default {
  components: {elCard, yearCount, timeSelect},
  props: {
    categoryData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      categoryValue: [],
      loading: false
    }
  },
  watch:{
    categoryData:function (val) {
      this.categoryValue=val;
    }
  },
  methods: {
    // ----------------- axios -------------
    /**
     * 检索图表数据
     * */
    selectCategory: function (pd) {
      this.loading = true;
      selectCategory(pd)
          .then(res => {
            this.loading = false;
            this.categoryValue = res.data.data;
            this.$message.success("检索成功");
          })
          .catch(err => {
            this.loading = false;
            console.error(err)
          });
    },
    /**
     * 刷新数据
     * */
    flushChartData: function () {
      let pd = {
        type: "category"
      }
      this.loading = true;
      flushChartData(pd)
          .then(res => {
            this.$message.success("刷新成功");
            this.loading = false;
            this.categoryValue = res.data.data.category;
          })
          .catch(err => {
            this.loading = false;
            console.error(err)
          })
    },
    // ----------- 功能 --------------
    /**
     * 监听到表单提交
     * @param val
     */
    submitForm: function (val) {
      this.selectCategory(val);
    },
    /**
     * 表单重置
     */
    resetForm: function () {
      this.categoryValue = this.categoryData;
    }
  }
}
</script>

<style scoped>

</style>